let {resolve}=require('path')
let autoprefixer=require('autoprefixer')   //处理css前缀
let htmlwebpackplugin=require('html-webpack-plugin')
let uglify=require('uglifyjs-webpack-plugin')
let miniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports={
    //模式  dev--pro development production
    mode:'development',
    //开启source-map
    //取消压缩 和最小化
    devtool:'source-map',
    optimization:{
        minimize:false
    },
    //入口文件   多文件
    entry:{
        index:resolve(__dirname,'./src/js/index.js'),
        detail:resolve(__dirname,'./src/js/detail.js'),
        collec:resolve(__dirname,'./src/js/collec.js')
    },
    //出口文件
    output:{
       path:resolve(__dirname,'./dist'),
       filename:'js/[name].js'
    },
    //处理模块设置
    module:{
        //模块匹配规则
        rules:[
            //js处理模块  es6-es5
            {
                test:/\.js$/,
                loader:'babel-loader',
                //排除那些文件不处理
                exclude:resolve(__dirname,'node_modules'),
                //预设  应该是先进行这一步操作
                query:{
                    "presets":['latest']
                }
            },
            //tpl模板处理
            {
                test:/\.tpl$/,
                loader:'ejs-loader'
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader:"postcss-loader",
                        options:{
                            plugins:function(){
                                return [autoprefixer('last 5 versions')]
                            }
                        }
                    }
                ]
            },
            {
                test:/.scss$/,
                use:[
                    'style-loader',   //将样式注入到html中
                    // {
                    //    loader:miniCssExtractPlugin.loader,
                    //    options:{
                    //        hmr:process.env.NODE_ENV==="development"
                    //    }
                    // },               //将样式提出出来成为一个单独的文件
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:function(){
                                return  [autoprefixer('last 5 versions')]
                            }
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|ico|woff|eot|svg|ttf)$/i,
                //设置限制条件 和名字规则
                loader:['url-loader?limit-1024&name=img/[name]-[hash:4].[ext]','image-webpack-loader']
            }
        ]
    },
    plugins:[
        // new uglify(),  //压缩
        new htmlwebpackplugin({
            filename:"index.html",
            template:resolve(__dirname,'src/html/index.html'),
            title:'新闻头条',
            chunks:['index'],
            chunksSortMode:'manual',  //按照chunks的顺序解析
            excludeChunks:['node_modules'],
            hash:true,
            minify:{
                removeComments:true,//移除注释
                collapseWhitespace:true  //一处空格
            }
        }),
        new htmlwebpackplugin({
            filename:"detail.html",
            template:resolve(__dirname,'src/html/detail.html'),
            title:'新闻详情',
            chunks:['detail'],
            chunksSortMode:'manual',
            excludeChunks:['node_modules'],
            hash:true,
            minify:{
                removeComments:true,//移除注释
                collapseWhitespace:true  //一处空格
            }
        }),
        new htmlwebpackplugin({
            filename:"collec.html",
            template:resolve(__dirname,'src/html/collec.html'),
            title:'收藏也',
            chunks:['collec'],
            chunksSortMode:'manual',
            excludeChunks:['node_modules'],
            hash:true,
            minify:{
                removeComments:true,//移除注释
                collapseWhitespace:true  //一处空格
            }
        }),
        //提取的css放置的路径
        // new miniCssExtractPlugin({
        //     filename:'css/[name].css'
        // })
    ],
    devServer:{
        watchOptions:{
            ignored:/node_modules/
        },
        // open:true,
        host:'localhost',
        port:9527
    }

}